<template>
  <mt-loadmore :top-method="loadTop" ref="loadmore" :topDistance="topDistance">
    <div class="take">
        <!-- 头部 -->
        <top :tags="tags"></top>
        <!-- 商品分类 -->
        <categories :cate="filterCate"></categories>
        <!-- 商家列表 -->
        <seller-list :sellerList="sellerList"></seller-list>
        <!-- 回到顶部 -->
        <go-top></go-top>
    </div>
  </mt-loadmore>
</template>
<script>
import Top from './top'
import Categories from './category'
import SellerList from './sellerList'
import Loading from 'base/loading/loading'
import goTop from 'base/goTop/goTop'
import * as TakeData from 'api/take'
import {mapActions, mapGetters} from 'vuex'
export default {
  name: 'take',
  data () {
    return {
      tags: [], //  热门小吃
      cate: [], //  外卖分类
      sellerList: [], //  商家列表
      topDistance: 20, // 将页面下拉20px则刷新
      scroll: 0
    }
  },
  mounted () {
    this.getTags().then((tag) => {
      this.tags = tag.data
    })
    this.getCategories().then(cate => {
      this.cate = cate.data
    })
    setTimeout(() => {
      this.getSeller().then(seller => {
        this.sellerList = seller.data
      })
    }, 1000)
  },
  computed: {
    ...mapGetters([
    ]),
    filterCate () {
      return this.cate
    }
  },
  activated () {
  },
  deactivated () {
  },
  methods: {
    ...mapActions([
      'setPageYPosition'
    ]),
    //  获取热门小吃
    getTags () {
      return this.$http.get(TakeData.TAGS, {})
    },
    //  获取外卖分类数据
    getCategories () {
      return this.$http.get(TakeData.CATEGORIES, {})
    },
    //  获取商家列表数据
    getSeller () {
      return this.$http.get(TakeData.SELLER, {})
    },
    loadTop () {
      console.log('加载新数据.......')
      setTimeout(() => {
        this.$refs.loadmore.onTopLoaded()
      }, 1500)
    }
  },
  components: {
    Top,
    Categories,
    SellerList,
    Loading,
    goTop
  }
}
</script>
<style lang="scss" scoped>
.take {
  background: #fff;
  overflow-y: auto;
  flex: 1;
}
.load-more{
  overflow:auto;
  flex: 1;
}
</style>
